<!--
 * @Author: zhangfeng
 * @Date: 2023-12-18 17:05:00
 * @LastEditTime: 2023-12-27 11:19:37
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\components\utils\Tree.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<el-select
		v-model="internalValue"
		class="m-2"
		placeholder="Select"
		size="large"
	>
		<el-option
			style="
				width: 100%;
				height: 100%;
				max-height: 200px;
				overflow-y: auto;
				padding: 0;
				background-color: #ffffff;
			"
			:label="selectedText"
			:value="internalValue"
		>
			<el-tree
				:data="menusAllProp"
				node-key="id"
				:render-content="renderContent"
			/>
		</el-option>
	</el-select>
</template>

<script setup lang="ts">
import type Node from 'element-plus/es/components/tree/src/model/node';
const menusAllProp = inject('menusAll') as MenusItemDisabled[];
const menusRawAllProp = inject('menusRawAll') as Ref<MenuItem[]>;
const props = defineProps({
	modelValue: {
		type: Number,
		required: true,
	},
});

const internalValue = ref(props.modelValue);

const emit = defineEmits(['update:modelValue']);

watch(internalValue, (val) => {
	emit('update:modelValue', val);
});
const handleNodeClick = (id: number) => {
	internalValue.value = id;
};

const selectedText = computed(() => {
	const selectedNode = menusRawAllProp.value.find(
		(node: MenuItem) => node.id === internalValue.value
	);
	return selectedNode ? selectedNode.name : '';
});

/**
 * 自定义渲染tree
 * @param h
 * @param param1
 */
const renderContent = (
	h: any,
	{ node, data }: { node: Node; data: MenuItemTree }
) => {
	return h(
		'span',
		{
			style: {
				width: '100%',
				background: node.data.disabled ? '#f3db2b5e' : '',
				color: node.data.disabled ? '#989898' : '',
				cursor: node.data.disabled ? 'not-allowed' : 'pointer',
			},
			onClick: () => (node.data.disabled ? null : handleNodeClick(node.data.id)),
		},
		h('span', null, node.data.name)
	);
};
</script>

<style scoped></style>
